<template>
  <el-card shadow="always" :body-style="{ padding: '20px' }">
    <div class="header" style="width: 100%">
      <span>
        <el-icon color="#3B98F7" :size="25" style="top: 5px">
          <Histogram style="font-size: 25px" />
        </el-icon>
      </span>
      <span class="header-title"> 项目考勤统计 </span>
    </div>
    <el-row :gutter="20">
      <el-col :span="24" :offset="0">
        <div :id="id" :style="{ height, width }" />
      </el-col>
    </el-row>
    <!-- card body -->
  </el-card>

  <div></div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";

const props = defineProps({
  id: {
    type: String,
    default: "pieChart",
  },
  width: {
    type: String,
    default: "100%",
    required: true,
  },
  height: {
    type: String,
    default: "300px",
    required: true,
  },
  actualAttendance: {
    type: Number,
    default: 0,
  },
  absenceAttendance: {
    type: Number,
    default: 0,
  },
});

const { actualAttendance, absenceAttendance } = toRefs(props);
const oldData = reactive({
  actualAttendance: 0,
  absenceAttendance: 0,
});

const options = {
  legend: {
    top: "bottom",
    textStyle: {
      color: "#999",
    },
  },
  series: [
    {
      name: "Nightingale Chart",
      type: "pie",
      radius: ["35%", "50%"],
      itemStyle: {
        borderRadius: 5,
        borderColor: "#fff",
        borderWidth: 1,
        color: function (params: any) {
          //自定义颜色
          const colorList = ["#F39423", "#F9C78B"];
          return colorList[params.dataIndex];
        },
      },
      label: {
        alignTo: "edge",
        formatter: "{name|{b}}\n{time|{c}}",
        minMargin: 5,
        edgeDistance: 1,
        lineHeight: 20,
        rich: {
          time: {
            fontSize: 10,
            color: "#999",
          },
        },
      },
      labelLine: {
        length: 10,
        length2: 10,
        minTurnAngle: 50,
        maxSurfaceAngle: 90,
      },
      data: [
        { value: 100, name: "出勤数" },
        { value: 150, name: "缺勤数" },
      ],
    },
  ],
};
const isReady = ref(false);

watchEffect(() => {
  console.log("actualAttendance", actualAttendance.value);

  if (actualAttendance.value != oldData.absenceAttendance || oldData.actualAttendance != actualAttendance.value) {
    initForm();
  }
});

const initForm = () => {
  const chart = echarts.init(document.getElementById(props.id) as HTMLDivElement);
  options.series[0].data[0].value = actualAttendance.value;
  options.series[0].data[1].value = absenceAttendance.value;
  oldData.absenceAttendance = absenceAttendance.value;
  oldData.actualAttendance = actualAttendance.value;
  chart.setOption(options);
  window.addEventListener("resize", () => {
    chart.resize();
  });
};

onMounted(() => {
  isReady.value = true;
  initForm();
});
</script>

<style lang="scss" scoped>
.pt20 {
  padding-top: 20px;
}

.header-title {
  font-size: 16px;
  color: #101010;
  font-weight: 600;
}

.header-description {
  font-size: 14px;
  color: #a3a3a3;
}
</style>
